<!--  -->
<template>
  <div class="">
    <!-- 三级联动（全局组件） -->
    <el-card style="margin: 20px 0px">
      <CategorySelect @getCategoryId="getCategoryId" :show="!show"></CategorySelect>
    </el-card>

    <!-- 底部这里将来时进行切换的 -->
    <el-card>
      <div v-show="scene == 0">
        <!-- 展示SPU列表的解构 -->
        <el-button type="primary" icon="el-icon-plus" @click="addSpu" :disabled="!category3Id">添加SPU</el-button>
        <el-table style="width: 100%" border :data="records">
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column prop="spuName" label="SPU名称" width="width"> </el-table-column>
          <el-table-column prop="description" label="SPU描述" width="width"> </el-table-column>
          <el-table-column label="操作" width="width">
            <template slot-scope="{ row, $index }">
              <!-- 这里按钮来用hintButton替换 -->
              <hint-button type="success" icon="el-icon-plus" size="mini" title="添加sku"
                @click="addSku(row)"></hint-button>
              <hint-button type="warning" icon="el-icon-edit" size="mini" title="修改spu"
                @click="updateSpu(row)"></hint-button>
              <hint-button type="info" icon="el-icon-info" size="mini" title="查看当前spu全部sku列表" @click="handler(row)"></hint-button>

              <el-popconfirm title="确定删除吗？" @onConfirm="deleteSpu(row)">
                <hint-button type="danger" icon="el-icon-delete" size="mini" title="删除spu" slot="reference"></hint-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 
                    分页器 ,当前第几页、数据总条数、每一页展示条数、连续页码数
                    @current-change="" 
                    :current-page="3" ：代表的是当前第几页
                    total: 代表分页器一共需要展示数据条数
                    page-size: 代表的是第一页需要展示数据多少
                    page-sizes: 代表可选择展示数据条数的数组
                    layout: 分页器的布局
                    pager-count:按钮的数量  连续页码的数量
                -->
        <el-pagination style="textAlign: center" :current-page="page" :page-size="limit" :page-sizes="[3, 5, 10]"
          layout="prev,pager,next,jumper, -> ,sizes,total" :total="total" @size-change="handleSizeChange"
          @current-change="getSpuList"></el-pagination>


      </div>
      <!--0代表展示SPU列表数据   1 添加SPU|修改SPU   2 添加SKU -->
      <SpuForm v-show="scene == 1" @changeScene="changeScene" ref="spu" />
      <SkuForm v-show="scene == 2" ref="sku" @changeScenes="changeScenes" />
    </el-card>


    <el-dialog :title="`${spu.spuName}的sku列表`" :before-close="close"  :visible.sync="dialogTableVisible">
      <!-- table展示sku列表 -->
      <el-table :data="skuList" style="width: 100%" border="" v-loading="loading">
        <el-table-column
            prop="skuName"
            label="名称"
            width="width"
        >
        </el-table-column>

        <el-table-column
            prop="price"
            label="价格"
            width="width"
        >
        </el-table-column>

        <el-table-column
            prop="weight"
            label="重量"
            width="width"
        >
        </el-table-column>

        <el-table-column
            label="默认图片"
            width="width"
        >
          <template slot-scope="{row,$index}">
               <img :src="row.skuDefaultImg" alt="" style="width: 100px; height: 100px;"/>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import SkuForm from "./SkuForm";
import SpuForm from "./SpuForm";
export default {
  name: "Spu",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      //分别是分类的id
      category1Id: "",
      category2Id: "",
      category3Id: "",
      //控制三级联动的可操作性
      show: true,
      page: 1,  //分页器当前第几页
      limit: 3,//每一页需要展示多少数据
      records: [], //存储的是spu的列表数据
      total: 0,  //分页器一共需要展示数据条数
      scene: 0,//0代表展示SPU列表数据   1 添加SPU|修改SPU   2 添加SKU
      dialogTableVisible:false, //控制对话框的显示隐藏
      spu:{},
      skuList:[],//存储的是SKU列表的数据
      loading:true,//添加一个加载的等待动画

    };
  },
  components: {
    SkuForm,
    SpuForm
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //获取SPU列表数据的方法
    async getSpuList(pager = 1) {
      this.page = pager;
      // console.log(this.page);
      const { page, limit, category3Id } = this;
      //携带三个参数：page 第几页 limit 每一页需要展示多少条数据  三级分类id
      let result = await this.$API.spu.reqSpuList(page, limit, category3Id)
      if (result.code == 200) {
        this.records = result.data.records;
        this.total = result.data.total;
      }
    },
    //三级联动的自定义事件，可以把子组件的相应id传递给父组件
    getCategoryId({ categoryId, level }) {
      if (level == 1) {
        this.category1Id = categoryId;
        this.category2Id = "";
        this.category3Id = "";
      } else if (level == 2) {
        this.category2Id = categoryId;
        this.category3Id = "";
      } else {
        this.category3Id = categoryId;
        //拿到三级的id发请求发给服务器
        this.getSpuList();
      }
    },

    //分页器展示数据条数发声变化 触发该函数
    handleSizeChange(limit) {
      this.limit = limit;
      //再次发请求
      this.getSpuList();
    },
    //添加spu
    addSpu() {
      //切换为场景1
      this.scene = 1;
      //通知子组件SpuForm发请求----两个
      this.$refs.spu.addSpuDate(this.category3Id);
    },
    //修改SPU
    updateSpu(row, index) {
      this.scene = 1;
      // 能拿到子组件的vComponents
      // console.log(this.$refs.spu);
      //通过SPUFORM的方法每次修改后都会发一次请求 initSpuData();
      //在父组件当中可以通过$ref获取子组件等等
      this.$refs.spu.initSpuData(row)
    },
    //自定义事件
    changeScene({ scene, flag }) {
      //flag这个形参为了区分保存按钮是添加还是修改的
      //切换解构场景
      this.scene = scene
      // if(flag == 'updateSpu'){
      //   // 修改状态停留当前页
      //   this.getSpuInfo(this.page)
      // }else{
      //   // 添加状态默认回第一页
      //   this.getSpuInfo()
      // }
      if (flag == "修改") {
        this.getSpuList(this.page);
      } else {
        this.getSpuList();
      }

    },
    //删除SPU的回调
    async deleteSpu(row) {
      let result = await this.$API.spu.reqDeleteSpu(row.id);
      if (result.code == 200) {
        this.$message({ type: 'success', message: '删除数据成功' });
        this.getSpuList(this.records.length > 1 ? this.page : this.page - 1);
      }
    },
    //添加sku按钮的回调
    addSku(row) {
      console.log(row.id);
      //切换场景2
      this.scene = 2;
      //父组件调用子组件的方法，让子组件发请求-----三个请求
      this.$refs.sku.getData(this.category1Id, this.category2Id, row)
    },
    //skuform通知父组件修改场景
    changeScenes(scene) {
      this.scene = scene;
    },
    //查看sku按钮的回调
    async handler(spu){
      //点击这个按钮的时候，
      this.dialogTableVisible = true;
      this.spu = spu;
      //获取sku列表的数据进行展示
      let result = await this.$API.spu.reqSkuList(spu.id);
      if(result.code == 200){
        this.skuList = result.data;
        this.loading = false;
      }
    },
    //关闭对话框的回调
    close(done){
      //loading属性再次变为真
      this.loading = true;
      //清楚sku列表的数据
      this.skuList = [];
      //管理对话框
      done();
    }



  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>